<template>
  <div style="height: 100%">
    <headPage></headPage>
    <div class="tree-info-wrap">
      <div class="tree-wrap">
        <div style="width:100%;height: calc(100% - 0.2rem);overflow: auto;">
          <el-tree ref="tree_ref"
                   :data="menuList"
                   :props="defaultProps"
                   highlight-current
                   :default-expanded-keys="expandedKeys"
                   node-key="id"
                   :accordion="true">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <div @click="handleNodeClick(node,data)" style="display: flex;align-items: center">
                  {{ node.label }}
                </div>
                <span>
                  <a @click="append(node,data)" v-if="node.data.tableName" class="btn-tree"> 新增 </a>
                </span>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="node-wrap">
        <el-table
            v-if="promptList.length>0"
            :data="promptList"
            stripe
            :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
            style="width: 100%;"
        >
          <el-table-column
              prop=""
              label="示例语句"
              align="left">
            <template #default="scope">
              <myTooltip :text="scope.row.inputWord"></myTooltip>
            </template>
          </el-table-column>
          <el-table-column
              prop=""
              label="示例SQL"
              align="left">
            <template #default="scope">
              <myTooltip :text="scope.row.outputSql"></myTooltip>
            </template>
          </el-table-column>
          <el-table-column
              prop="selectType"
              width="100"
              label="查询类型"
              align="center"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="orderId"
              width="80"
              label="排序"
              align="center"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop=""
              width="200"
              align="center"
              label="操作">
            <template #default="scope">
              <el-button type="primary" size="small" @click="showPrompt(scope.row)">查看</el-button>
              <el-button type="primary" size="small" @click="updatePrompt(scope.row)">修改</el-button>
              <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogUpdateVisible" title="新增/修改">
    <el-form :inline="true" ref="ref_indicator" :model="paramsIndicator" label-width="100px" :rules="rules">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="示例语句：" prop="inputWord">
            <span v-if="readOnly">{{paramsIndicator.inputWord}}</span>
            <el-input v-else type="textarea" rows="2" v-model="paramsIndicator.inputWord" clearable style="width: 100%" placeholder="请输入示例语句"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="示例SQL：" prop="outputSql">
            <span v-if="readOnly">{{paramsIndicator.outputSql}}</span>
            <el-input v-else type="textarea" rows="8" v-model="paramsIndicator.outputSql" clearable style="width: 100%" placeholder="请输入示例SQL"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="查询类型：" prop="selectType">
            <span v-if="readOnly">{{paramsIndicator.selectType}}</span>
            <el-input v-else v-model="paramsIndicator.selectType" clearable style="width: 100%" placeholder="请输入查询类型"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序：" prop="orderId">
            <span v-if="readOnly">{{paramsIndicator.orderId}}</span>
            <el-input v-else v-model="paramsIndicator.orderId" clearable style="width: 100%" placeholder="请输入排序"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-if="!readOnly">
        <el-button @click="dialogUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
      <div v-else class="dialog-footer">
        <el-button type="primary" @click="dialogUpdateVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {
  getUserTableTreeList,
  findPromptList,
  updatePrompt,
  delPrompt,
  addPrompt
} from '@/api/chartdb'
import consts from '../../common/consts'
import headPage from '../ui/headPage.vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import myTooltip from '../ui/MyTooltip.vue'

export default {
  name: 'prompt',
  components: {
    headPage,myTooltip
  },
  props:{},
  data(){
    return {
      defaultProps:{
        children: 'children',
        label: 'title',
        id:'id',
        isLeaf: 'leaf'
      },
      expandedKeys:[],
      menuList:[],
      paramsIndicator:{},
      currentTableName:'',
      dialogUpdateVisible:false,
      readOnly:false,
      promptList:[],
      rules: {
        inputWord: [{ required: true, message: " ", trigger: "blur" }],
        outputSql: [{ required: true, message: " ", trigger: "blur" }],
        selectType: [{ required: true, message: " ", trigger: "blur" }],
        // orderId: [{ required: true, message: " ", trigger: "blur" }],
      },
    }
  },
  mounted() {
    this.getUserTableTreeList();
  },
  methods:{
    getUserTableTreeList(){
      getUserTableTreeList({}).then((res) => {
        this.menuList=res.data.data.data
      })
    },
    handleNodeClick(node, data) {
      if(data.tableName){
        this.currentTableName=data.tableName
        this.findPromptList(data.tableName)
      }else {
        this.promptList=[]
      }
    },
    findPromptList(tableName){
      findPromptList({modelCode:tableName}).then((res) => {
        if(res.data.code==200){
          this.promptList=res.data.data
        }else {
          ElMessage({
            message: '查询提示词列表失败',
            type: 'error'
          })
        }
      })
    },
    append(node,data){
      this.readOnly=false
      this.paramsIndicator={};
      this.dialogUpdateVisible=true
    },
    save(){
      this.paramsIndicator.modelCode=this.currentTableName
      if(this.paramsIndicator.id){
        this.update()
      }else {
        this.add()
      }
    },
    add(){
      this.$refs.ref_indicator.validate((valid) => {
        if (valid) {
          this.paramsIndicator.inputWord=this.paramsIndicator.inputWord.replace(/\n/g,"").replace(/\r/g,"")
          this.paramsIndicator.outputSql=this.paramsIndicator.outputSql.replace(/\n/g,"").replace(/\r/g,"")
          addPrompt(this.paramsIndicator).then((res) => {
            if(res.data.code==200){
              ElMessage({
                message: '保存成功',
                type: 'success'
              })
              this.dialogUpdateVisible=false
              this.findPromptList(this.currentTableName)
            }else{
              ElMessage({
                message: '保存失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    update(){
      this.$refs.ref_indicator.validate((valid) => {
        if (valid) {
          this.paramsIndicator.inputWord=this.paramsIndicator.inputWord.replace(/\n/g,"").replace(/\r/g,"")
          this.paramsIndicator.outputSql=this.paramsIndicator.outputSql.replace(/\n/g,"").replace(/\r/g,"")
          updatePrompt(this.paramsIndicator).then((res) => {
            if(res.data.code==200){
              ElMessage({
                message: '保存成功',
                type: 'success'
              })
              this.dialogUpdateVisible=false
              this.findPromptList(this.currentTableName)
            }else{
              ElMessage({
                message: '保存失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    del(id){
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPrompt({id:id}).then((res) => {
          if(res.data.code==200){
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            this.findPromptList(this.currentTableName)
          }else{
            ElMessage({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      }).catch(() => {
      });
    },
    updatePrompt(row){
      this.readOnly=false
      this.paramsIndicator=row
      this.dialogUpdateVisible=true
    },
    showPrompt(row){
      this.readOnly=true
      this.paramsIndicator=row
      this.dialogUpdateVisible=true
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-info-wrap{
  width: 100%;
  height: calc(100% - .3rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  background: #f1f1f1;
  .tree-wrap{
    width: calc(25% - .2rem);
    height: calc(100% - .2rem);
    padding: .1rem;
    border-radius: .1rem;
    border: 1px solid #ebebeb;
    background: #fff;
    overflow: auto;
    position: relative;
  }
  .node-wrap{
    width: calc(75% - .2rem);
    height: calc(100% - .2rem);
    padding: .2rem;
    border-radius: .1rem;
    border: 1px solid #ebebeb;
    background: #fff;
    overflow: auto;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
.btn-tree{
  color: #5C7CFF;
  font-size: 13px;
  margin-right: 8px;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: #5C7CFF !important;
  color: #fff;
  .btn-tree{
    color: #fff;
  }
}
:deep(.el-input__wrapper){
  width: 100% !important;
}
.tittle-wrap{
  height: 0.2rem;
  font-size: 0.1rem;
  display: flex;
  align-items: center;
  color: #333;
  background: #f1f1f1;
  padding: 0 0.1rem;
  margin-bottom: 0.1rem;
  justify-content: space-between;
  span{
    border-left:  4px solid #5C7CFF;
    height: .1rem;
    line-height: .1rem;
    padding-left: .05rem;
  }
}
.el-pagination {
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
}
.dialog-footer{
  height: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-shengxiao{
  color: green;
  margin-left: .02rem;
  font-size: .1rem;
}
.icon-shixiao{
  //color: gray;
  margin-left: .02rem;
  font-size: .1rem;
}
.el-form--inline .el-form-item{
  width: 100%;
}
.box-context{
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  font-weight: 400;
  color: #333333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>